<template>
  <div id="orderlistoperation5-box">
    <div id="orderlistoperation5-heard">
      <div class="orderlistoperation5-hread-1">
        <img         @click="this.$router.go(-1)"
 src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u4348.png"/>
         <span>订单详情</span>
      </div>
      <div class="orderlistoperation5-hread-2">
        <p class="ohp2-1">已取消</p>
      </div>
    </div>
    <div id="orderlistoperation5-body">
      <div class="orderlistoperation5-body-1">
          <div class="obp1-1">
            <div class="bop1-1-1">
              <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9387.png"/>
            </div>
            <div class="bop1-1-2">
              <span class="ssp">【水光针】水光针/皮肤修正/祛痘嫩<p>肤/皮肤清洁</p></span>
              <p>基础套餐
                <span style="margin-left:100%;">*1</span>
              </p>
              <p>预约金<span style="color:red;">￥299.00</span>到店支付￥699.00</p>
            </div>
            </div>
      </div>
      <div class="orderlistoperation5-body-2">
        <p class="obp2-1">广东玉美整形医院</p>
        <p class="obp2-2">
          <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9382.png"/>
          <span>广东广州大华区明离路科技园880号</span>
        </p>
      </div>
      <div class="orderlistoperation5-body-3">
        <div class="obp3-1">
          <p>预约金总计<span style="margin-left:60%">￥599.00</span></p>
          <p>尾款总计<span style="margin-left:63%">￥599.00</span></p>
          <p>预约金优惠卷<span>-￥9.00</span></p>
        </div>
        <div class="obp3-2">
          <p>实付金额（预约金）<span style="color:red;font-size:16px;">￥589.00</span></p>
        </div>
      </div>
      <div class="orderlistoperation5-body-4">
        <div class="obp4-1">
          <p>订单编号：<span>418628377</span></p>
          <p>下单时间：<span>2019-02-16 15:36:25</span></p>
          <p>取消时间：<span>2019-02-16 15:36:25</span></p>
        </div>
        <div class="obp4-2">
          <div class="obp4-2-1">
            <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9375.png"/>
            在线咨询
          </div>
          <div class="obp4-2-2">
            <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85-%E5%BE%85%E4%BB%98%E6%AC%BE/u9378.png"/>
            电话客服
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {

}
</script>

<style scoped>
#orderlistoperation5-box{width: 390px; height: 800px; background-color: #f2f2f2;}
/* -------------------------------------------------------- */
#orderlistoperation5-heard{width: 100%; height: 20%; background-color: #ec7b67;}
.orderlistoperation5-hread-1{width: 100%; height: 50%; line-height: 100px;color:white;}
.orderlistoperation5-hread-1 span{margin-left: 150px;}
.orderlistoperation5-hread-2 p{width: 100%; height: 50%;color: white;line-height: 38px; text-indent:6%}
.ohp2-1{font-size: 20px;}
/* -------------------------------------------------------------- */
#orderlistoperation5-body{width: 100%; height: 80%; margin-top:4%;margin-left: 5%;}
.orderlistoperation5-body-1{width: 90%; height: 20%; background-color: white;border-radius: 10px;}
.obp1-1{width: 100%; height: 100%; border-bottom: 1px solid #f2f2f2;display: flex; justify-content: space-around;}
.bop1-1-1{width: 20%; height: 90%; margin-top: 6%;}
.bop1-1-2{width: 65%; height: 90%;margin-top: 6%;}
.bop1-1-2 p{font-size: 12px; color:#af9eab;}
.ssp{font-size: 14px;}
/* ------------------------------------------------------------- */
.orderlistoperation5-body-2{width: 90%; height: 15%; background-color: white; border-radius: 10px;margin-top:4%}
.obp2-1{font-size:16px;text-indent:5%;line-height:300%}
.obp2-2{margin-left: 4%; font-size: 12px; color:#cccccd; vertical-align:middle;}
.obp2-2 span{margin-left: 4%;}
/* ---------------------------------------------------------------- */
.orderlistoperation5-body-3{width: 90%; height: 27%; background-color: white; border-radius: 10px;margin-top:4%}
.obp3-1{width: 100%; height: 70%;border-bottom:1px solid #f4f4f4;line-height: 250%;text-indent: 5%;}
.obp3-1 p{font-size: 12px;color: #cccccd;}
.obp3-1 span{font-size: 12px;color: black;margin-left: 58%;}
.obp3-2{width: 100%; height: 30%;line-height: 300%;}
.obp3-2 p{margin-left: 40%;font-size: 12px;}
/* --------------------------------------------------------------------- */
.orderlistoperation5-body-4{width: 90%; height: 30%; background-color: white; border-radius: 10px;margin-top:4%}
.obp4-1{ color: #cccccd; width: 100%; height: 50%;border-bottom: 1px solid #f4f4f4;margin-top: 4%;line-height: 200%;text-indent: 7%;}
.obp4-1 span{margin-left: 5%;}
.obp4-2{width: 100%; height: 50%;display: flex;line-height: 450%;}
.obp4-2-1{width: 50%; height: 100%;text-align: center;}
.obp4-2-2{width: 50%; height: 100%;text-align: center;}

</style>